import mapboxgl from "mapbox-gl";

// 初始化坐标显示容器
export const setupCoordinateDisplay = (map: mapboxgl.Map) => {
  // 创建坐标显示容器
  const coordinateDisplay = document.createElement("div");
  coordinateDisplay.id = "coordinate-display";
  coordinateDisplay.style.position = "absolute";
  coordinateDisplay.style.bottom = "80px";
  coordinateDisplay.style.left = "50%";
  coordinateDisplay.style.transform = "translateX(-50%)";
  coordinateDisplay.style.backgroundColor = "rgba(128, 128, 128, 0.5)";
  coordinateDisplay.style.padding = "10px";
  coordinateDisplay.style.borderRadius = "5px";
  coordinateDisplay.style.boxShadow = "0 0 5px rgba(0, 0, 0, 0.3)";
  coordinateDisplay.style.display = "flex";
  coordinateDisplay.style.flexDirection = "row";
  coordinateDisplay.style.justifyContent = "center";
  coordinateDisplay.style.alignItems = "center";
  coordinateDisplay.style.color = "white";

  // 创建经度和纬度显示元素
  const lngValue = document.createElement("span");
  lngValue.id = "lng-value";
  const latValue = document.createElement("span");
  latValue.id = "lat-value";

  // 创建其他信息显示元素，这里假设是一个简单的文本信息
  const otherInfo = document.createElement("span");
  otherInfo.id = "other-info";
  otherInfo.textContent = "，缩放级别：0";

  // 添加元素到显示容器
  coordinateDisplay.appendChild(document.createTextNode("经度："));
  coordinateDisplay.appendChild(lngValue);
  coordinateDisplay.appendChild(document.createTextNode("  纬度："));
  coordinateDisplay.appendChild(latValue);
  coordinateDisplay.appendChild(document.createTextNode("  "));
  coordinateDisplay.appendChild(otherInfo);

  // 将显示容器添加到地图容器中
  const mapContainer = map.getContainer();
  if (mapContainer) {
    mapContainer.appendChild(coordinateDisplay);
  }

  // 监听鼠标移动事件
  map.on("mousemove", e => {
    lngValue.textContent = e.lngLat.lng.toFixed(4);
    latValue.textContent = e.lngLat.lat.toFixed(4);
    // 获取相机缩放级别
    // const zoom = map.getZoom();
    // otherInfo.textContent = `，缩放级别：${zoom.toFixed(2)}`;
  });
  // 监听鼠标滚动事件
  map.on("zoom", () => {
    const zoom = map.getZoom();
    otherInfo.textContent = `，缩放级别：${Math.trunc(zoom)}`;
  });
  // 监听地图加载完成事件，设置初始坐标
  map.on("load", () => {
    const center = map.getCenter();
    lngValue.textContent = center.lng.toFixed(4);
    latValue.textContent = center.lat.toFixed(4);
  });
};
